<template>
  <up-switch
    v-model="modelValue"
    :size="size"
    :activeColor="activeColor"
    :inactiveColor="inactiveColor"
    :="$attrs"
    class="nw-switch"
  ></up-switch>
</template>

<script setup>
defineOptions({
  name: 'Switch',
  inheritAttrs: false
})

const props = defineProps({
  size: {
    type: [String, Number],
    default: () => g_utils.rpxToPx(28)
  },
  activeColor: {
    type: String,
    default: '#27be87'
  },
  inactiveColor: {
    type: String,
    default: '#E5E5E5'
  }
})

const modelValue = defineModel({
  type: Boolean,
  default: false
})
</script>

<style lang="scss" scoped>
.nw-switch {
  .u-switch,
  .u-switch__bg {
    // width: 62rpx !important;
    // height: 32rpx !important;
  }
  .u-switch__node {
    // width: 28rpx !important;
    // height: 28rpx !important;
    &:not(.u-switch__node--on) {
      // transform: translateX(-30rpx) !important;
    }
  }
}
</style>
